import { useState, useEffect } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $http, $fn, $ } = window
/* -------------------------------------------------------- Async Component -- */
import BackupMysqlTable from '../table/_config/backup-mysql-table'
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
const className = 'nosel cp abs_full fxm pl5'
/* -------------------------------------------------------- Page Component -- */
const Component = () => {
	const navigate = useNavigate( )
	const { database } = $fn.query()
	const [info, setInfo] = useState({ title:'', database, folder:'' })
	useEffect(()=>{
		if(!database){
			$http.pull(null, 'project/info', { loading:true }).then( d => {
				if(d) setInfo(d)
			} )
		}
	},[ database ])
	
	const config = {
		page : {
			title: '数据迁移 - ' + `${ database ? database : info?.title + ' - ' + info?.database }`,
			controls	: [
				// { mode:'del', onOk, abs:0, way:'post', param:{ database } }
				{ label:'清空表', mode:'confirm', ghost:1, abs:0, api: 'mysql/truncate_table', idStr:'table_name', param: { database:info.database }},
				{ label:'清空', mode:'confirm', api:'mysql/seaql_migrations/empty', ghost:1, isKeys:1, abs:0, r:1, way:'put', param:({ keys }) =>({ id:keys, database:info.database, clear:1 }) },
				{ label:'保留', mode:'confirm', api:'mysql/seaql_migrations/empty', ghost:1, isKeys:1, abs:0, r:1, way:'put', param:({ keys }) =>({ id:keys, database:info.database, clear:0 }) },
				{ label:'备份表 SQL', mode:'formModal', isKeys:1, config:({ keys }) => BackupMysqlTable({ table_name:keys, backup:info.backup, database:info.database } )},
				{ mode:'refresh' },
				database ? { mode: 'back' } : null
			]
		},
		// 搜索配置
		search : {
			query 		: { database:info.database },
			data:[
				{ label:'表名称', 	name:'table_name' },
				{ label:'是否清空', 	name:'clear', type:'radio', mode:'button', search:1 },
			],
		},
		// 表格配置
		table: {
			api 		: 'mysql/seaql_migrations',
			delApi 		: 'mysql/seaql_migrations/del',
			paging 		: 0,
			// max 		: 1000,
			row:{},
			idStr 		: 'version',
			cols		: [
				{ title: '表', 			dataIndex: 'version', sorter:1, render: t => {
					return (
						<div className={className} onClick={e=>{e.stopPropagation(); $.pushNext(navigate, '/data', { t, d: info.database })}}>
							<b className='ar f13'>{t}</b>
						</div>
					)
				} },
				{ title: '是否清空', 	dataIndex: 'clear', width:300, align:'center', render: t => t ? <b className='c3'>Yes</b> : <i className='g9'>No</i> },
			],
			controls 	: {
				width 	: 350,
				data: ({ clear, version }) => [
					{ mode:'confirm', api:'mysql/seaql_migrations/empty', label: clear ? '保留' : '清空', gray:!clear, abs:0, r:1, way:'put', param:{ database:info.database, id:[version], clear: !clear } },
				]
			}
		}
	}
	return info.database && <><SearchTable {...config}/><Outlet/></>
}
export default Component